<%--
  Created by IntelliJ IDEA.
  User: adminthy
  Date: 2018/6/17
  Time: 18:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML>
<html>
<head>
    <title>商品管理</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
        body{
            font-family: "微软雅黑";
            background-color: #EDEDED;
        }
        h2{
            text-align: center;
        }
        table{
            margin: 0 auto;
            /* width: 96%; */
            text-align: center;
            border-collapse:collapse;
        }
        td, th{ padding: 7px;}
        th{
            background-color: #DCDCDC;
        }
        th.ths{
            width: 100px;
        }
        input.pnum{
            width:80px;
            height:25px;
            font-size: 18px;
            text-align:center;
        }

    </style>

    <!--引入jquery的js库-->
    <script src="js/jquery-1.12.4.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap-theme.css">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <style>

    </style>
</head>
<body>
<h2>商品管理</h2>
<div class="wrapper">
    <div class="head">
        <a href="${app}/ProdAddServlet" type="button" class="btn btn-primary">添加商品</a>
    </div>

    <table class="table table-striped">
        <thead>
        <tr>
            <th>序号</th>
            <th>商品名称</th>
            <th>商品分类</th>
            <th>商品图片</th>
            <th>商品描述</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${requestScope.prodList}" var="prod" varStatus="status">
            <tr data-pid="${prod.id}">
                <td>${status.index}</td>
                <td>${prod.name}</td>
                <td>${prod.category.name}</td>
                <td><img src="${app}/ProdImgServlet?img=${prod.imgUrl}" alt="" width="50" height="50"></td>
                <td>${prod.description}</td>
                <td>
                    <button type="button" class="btn btn-warning btn-sm change-prod">修改</button>
                    <button type="button" class="btn btn-danger btn-sm delete-prod">删除</button>
                </td>
            </tr>
        </c:forEach>

        </tbody>
    </table>
</div>


<script>
    $(".delete-prod").click(function () {
        var $tr =$(this).parents("tr");
        var pid = $tr.data("pid");
        console.log(pid);
        $.post({
            url: "${app}/ProdDeleteServlet",
            data: {"pid": pid},
            success: function (data) {
                console.log(data);
                if ("true" == data) {
                    alert("删除成功！");
                    $tr.remove();
                } else {
                    alert("删除失败！")
                }
            }
        });
    })
</script>

</body>
</html>



